<template>
  <HModal cancel-text="取消" ok-text="确定" title="添加用户任务" @cancel="close" @ok="handleOk" v-model="visible">
    <Form>
      <FormItem label="任务名称">
        <Input v-model="taskName" placeholder="请输入任务名称"/>
      </FormItem>
    </Form>
    <template slot="footer">
      <div style="display: flex; align-items: center">
        <div style="flex: 1; text-align: left; user-select: none">
          <Checkbox
              @click="() => createMultiUserTask = !createMultiUserTask"
              :checked="createMultiUserTask">
            多节点
          </Checkbox>
        </div>
        <Button @click="close">取消</Button>
        <Button type="primary" @click="handleOk">确定</Button>
      </div>
    </template>
  </HModal>
</template>
<script>
import {Form, Input, Modal} from 'ant-design-vue';
import {createEmptyUserTask} from '@/components/flow/typs/flow';
import HModal from '@/components/HModal/HModal.vue';
import {Button, Checkbox} from 'ant-design-vue';
import {guid} from '@/utils';

export default {
  name: 'UserTaskConfigModal',
  components: {
    HModal,
    Modal,
    Button,
    Checkbox,
    Form,
    Input,
    FormItem: Form.Item
  },
  props: {
    userTask: {
      type: Object,
      default: () => createEmptyUserTask(),
    }
  },
  data() {
    return {
      createMultiUserTask: false,
      visible: true,
      taskName: undefined,
    };
  },
  methods: {
    open() {
      this.visible = true;
    },
    close() {
      this.visible = false;
      this.$emit('close');
    },
    handleOk() {
      this.userTask.taskName = this.taskName
      this.visible = false
      this.userTask.createMultiUserTask = this.createMultiUserTask;
      let temp = JSON.parse(JSON.stringify(this.userTask));
      if (this.createMultiUserTask) {
        this.userTask.multiUserTask = []
        for (let i = 0; i < 5; i++) {
          let task = JSON.parse(JSON.stringify(temp));
          task.id = guid();
          task.taskName += '_' + (1 + i);
          this.userTask.multiUserTask.splice(0, 0, task);
        }
      }
      setTimeout(() => {
        this.$emit('close');
        this.$emit('ok');
      }, 300);
    },
  }
};
</script>